<template>
  <div>
    <TopNav/>
    <div class="parent">
        <router-view  class="left" style="width:200px;" name="nav"/>
        <MainContent class="right"></MainContent>
    </div>
  </div>
</template>
<script lang="ts" setup>

import { ref, defineComponent, onMounted } from 'vue'
import TopNav from './views/TopNav.vue'
import LeftMenu from './views/LeftMenu.vue'
import MainContent from './views/MainContent.vue'
import MainContent2 from './views/MainContent2.vue'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'


let a = ref(10);

onMounted(() => {
  console.log("test");
  a.value++;
})

</script>

<style scope>

#app {
  text-align: center;
  color: var(--ep-text-color-primary);
}

.element-plus-logo {
  width: 50%;
}

.parent {
  position: absolute;
  display: flex;
  top: 42px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.left {
  box-sizing: border-box;
}

.right {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  flex: 1
}
</style>
